<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="./img/icon_huaji.ico">

    <title>任务结果界面</title>

    <link href="./css/bootstrap.css" rel="stylesheet">
    <link href="./css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <link href="dashboard.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/filter.css">
    <script src="./js/ie-emulation-modes-warning.js"></script>
</head>

<body>



    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="./index.html">公司logo</a>
            </div>

            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="./task_list.html">任务列表</a></li>
                </ul>


                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">设置</a></li>
                    <li><a href="#">简介</a></li>
                    <li><a href="#">帮助</a></li>
                    <li><a href="#">当前用户:Admin</a></li>
                </ul>
                <form class="navbar-form navbar-right">
                    <input type="text" class="form-control" placeholder="Search...">
                </form>
            </div>
        </div>
    </nav>

    <div class="container-fluid task_detail">
        <div class="row detail_page">
            <!-- detail left -->
            <div class="col-xs-12 col-sm-4">
                <!-- 1.任务ID -->
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h3 class="panel-title">任务ID</h3>
                    </div>
                    <div class="panel-body">
                        <p>SYS-2019/5/6</p>
                    </div>
                </div>
                <!-- 2.任务名称 -->
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h3 class="panel-title">任务名称</h3>
                    </div>
                    <div class="panel-body">
                        <p>水杨酸</p>
                    </div>
                </div>
                <!-- 3.化学结构 -->
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h3 class="panel-title">化学结构</h3>
                    </div>
                    <div class="panel-body">
                        <div class="img_box"><img src="./img/shuiyangsuan.png" alt=""></div>
                    </div>
                </div>
                <!-- 搜索框 -->
                <div class="">
                    <input class="input_search" type="search" name="" id="usr_search" placeholder="根据参数名称搜索">
                    <button class="btn btn-lg btn-info" id="btn_search" onclick="search_reset()">重置</button>
                </div>
            </div>
            <!-- detail middle -->
            <div class="col-xs-12 col-sm-4">
                <!-- 4.类药性评价 -->
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h3 class="panel-title">类药性评价</h3>
                    </div>
                    <div class="panel-body clearfix">

                        <div class="p_area">
                            <p>打分: 5/5</p>
                            <p>建议:基本符合类药性五原则</p>
                        </div>
                        <div class="btn_area">
                            <button type="button" class="btn btn-sm btn-info" onclick="open_evaluation()">详情</button>
                        </div>
                    </div>
                </div>
                <!-- 5.成药性风险 -->
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h3 class="panel-title">成药性风险</h3>
                    </div>
                    <div class="panel-body">
                        <p>打分：75/100</p>
                        <p>建议:
                            化合物基本符合类药五原则，并且具有溶解性、脂溶性较好，主要通过CYP2C9/2E1代谢，通过肾脏排泄。但毒性较大，容易引起胃肠道、呼吸道、皮肤等刺激作用，容易造成肾毒性、心脏毒性，引起胃出血，眼角膜刺激、皮肤刺激等副作用。由于其基本理化性质较好，但毒性较大，认为该化合物成药性评分为75/100，需要对其进行结构改造，通过改变毒性较大基团，如将酚羟基取代为酯基，提高生物利用度，改善其毒性，有利于成药。
                        </p>
                        <div class="btn_area">
                            <a href="./risk.html" target="_block">
                                <button type="button" class="btn btn-sm btn-info " id="btn_risk">详情</button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- detail right -->
            <div class="col-xs-12 col-sm-4">
                <!-- 6.AI匹配药物 -->
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h3 class="panel-title">AI匹配药物</h3>
                    </div>
                    <div class="panel-body">
                        <p>药物名称：阿司匹林</p>
                        <div class="clearfix">
                            <div class="p_area">
                                <p>药物结构:</p>
                            </div>
                            <div class="img_box fr"><img src="./img/aspl.png" alt=""></div>
                        </div>
                        <p>药品适用症：非甾体类抗炎药，用于解热、镇痛、抗炎、抗风湿和抗血小板聚集等功能。也可用于降低急性心肌梗死疑似患者的发病风险，预防心肌梗死复发等。</p>
                        <div class="btn_area">
                            <button type="button" class="btn btn-sm btn-info" onclick="open_optimize()">改造过程</button>
                        </div>
                    </div>
                </div>

                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xs-4">
                            <a href="./paper.html"><button
                                    class="btn btn-lg btn-info w_100 no_outline">生成报告</button></a>
                        </div>
                        <div class="col-xs-4">
                            <button class="btn btn-lg btn-info w_100 no_outline">导出</button>
                        </div>
                        <div class="col-xs-4">
                            <a href="./task_list.html">
                                <button class="btn btn-lg btn-info w_100 no_outline">任务列表</button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12 col-sm-2">
                <button class="btn btn-lg width_100 no_outline switch_off" id="filter_switch">筛选</button>
            </div>
            <div class="col-xs-12 col-sm-8 filter_hidden">
                <div class="row">
                    <div class="col-xs-12 col-sm-2 width_25">
                        <button class="btn btn-lg btn-default no_outline btn_off" id="btn_abs">吸收 Absorption</button>
                    </div>
                    <div class="col-xs-12 col-sm-2 width_25">
                        <button class="btn btn-lg btn-default no_outline btn_off" id="btn_dis">分布 Distribution</button>
                    </div>
                    <div class="col-xs-12 col-sm-2 width_25">
                        <button class="btn btn-lg btn-default no_outline btn_off" id="btn_met">代谢 Metabolism</button>
                    </div>
                    <div class="col-xs-12 col-sm-2 width_25">
                        <button class="btn btn-lg btn-default no_outline btn_off" id="btn_exc">排泄 Excretion</button>
                    </div>
                    <div class="col-xs-12 col-sm-2 width_25">
                        <button class="btn btn-lg btn-default no_outline btn_off" id="btn_tox">毒性 Toxicity</button>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid task_tab">
        <div class="row">
            <div class="col-sm-1  hidden-xs">
            </div>

            <div class="col-sm-10 main">
                <div class="table-responsive box_num" id="box1">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>参数</th>
                                <th>预测结果</th>
                                <th>单位</th>
                                <th>正常值</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div> <!-- table finish -->
        </div> <!-- row finish -->
    </div>

    <div>
        <!-- evaluation -->
        <div class="mac_box" id="evaluation">
            <div class="mac_title">
                <div class="text_area ">
                    <p>类药性评价</p>
                </div>
                <div class="round_btn_area fr">
                    <div class="btn_round btn_min"></div>
                    <div class="btn_round btn_max"></div>
                    <div class="btn_round btn_close" onclick="close_evaluation()"></div>
                </div>
            </div>
            <div class="mac_body">
                <p> <em>打分:&nbsp;</em> 5/5</p>
                <p> <em>建议:&nbsp;</em> 基本符合类药性五原则</p>
                <p> <em>详情: </em> <br>
                    1.分子量138.12（小于500）<br>
                    2.氢键给体数目2（小于5）<br>
                    3.氢键受体数目2（小于10）<br>
                    4.脂水分配系数2.7（小于5）<br>
                    5.可旋转键的数量2（不超过10个）<br>
                </p>
            </div>
        </div>
        <!-- optimize -->
        <div class="mac_box" id="optimize">
            <div class="mac_title">
                <div class="text_area ">
                    <p>匹配药品结构优化过程</p>
                </div>
                <div class="round_btn_area fr">
                    <div class="btn_round btn_min"></div>
                    <div class="btn_round btn_max"></div>
                    <div class="btn_round btn_close" onclick="close_optimize()"></div>
                </div>
            </div>
            <div class="mac_body">
                <div class="row mb_15">
                    <div class="col-xs-4">
                        <p> <em>药物名称:</em> 阿司匹林</p>
                        <div class="row">
                            <div class="col-xs-4">
                                <p> <em>药物结构:</em> </p>
                            </div>
                            <div class="col-xs-8">
                                <div class="img_box" id="aspl">
                                    <img src="./img/aspl.png" alt="">
                                </div>
                            </div>

                        </div>
                        <p> <em>药品适用症:</em> <br>
                            &nbsp;&nbsp;&nbsp;非甾体类抗炎药，用于解热、镇痛、抗炎、抗风湿和抗血小板聚集等功能。也可用于降低急性心肌梗死疑似患者的发病风险，预防心肌梗死复发等。</p>

                    </div>
                    <div class="col-xs-8">
                        <div class="img_box">
                            <img src="./img/pipeiyaopinjiegouyouhua.jpg" alt="">
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>化合物</th>
                                <th>化合物的解离度</th>
                                <th>在中性条件下的脂水分配系数</th>
                                <th>水中溶解度</th>
                                <th>人空肠中化合物的有效渗透能力</th>
                                <th>人血浆蛋白游离分数</th>
                                <th>人全血血浆化合物浓度比</th>
                                <th>化合物总体清除率</th>
                                <th>肾排泄分数</th>
                                <th>化合物稳定性</th>
                                <th>风险</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>



    <script>
        function open_evaluation() {
            var evaluation = document.getElementById('evaluation');
            evaluation.style.display = 'block';
        }
        function close_evaluation() {
            var evaluation = document.getElementById('evaluation');
            evaluation.style.display = 'none';
        }
        function open_risk() {
            var risk = document.getElementById('risk');
            risk.style.display = 'block';
        }
        function close_risk() {
            var risk = document.getElementById('risk');
            risk.style.display = 'none';
        }
        function open_optimize() {
            var optimize = document.getElementById('optimize');
            optimize.style.display = 'block';
        }
        function close_optimize() {
            var optimize = document.getElementById('optimize');
            optimize.style.display = 'none';
        }
        // optimize
    </script>

    <!-- display table -->
    <script src="./js/sheet3.js"></script>
    <script src="./js/sheet6.js"></script>

    <script>
        var tbody = document.getElementsByTagName('tbody')[0];
        var tbody1 = document.getElementsByTagName('tbody')[1];
        var usr_search = document.getElementById('usr_search')

        function add_item_to_table(data_arr, target_tbody) {
            for (let index = 0; index < data_arr.length; index++) {
                var mod = `
            <tr class="belong_${data_arr[index].key4}" style="display: table-row">
                <td>${tbody.children.length + 1}</td>
                <td>${data_arr[index].key0}</td>
                <td><input type="text" value=${data_arr[index].key1}></td>
                <td><input type="text" value=${data_arr[index].key2}></td>
                <td>
                    <select name="location" id="">
                        <option value="x"> &lt; </option>
                        <option value="d"> &gt; </option>
                        <option value="x=" selected="selected"> &lt;= </option>
                        <option value="d="> &gt;= </option>
                        <option value="="> = </option>
                    </select>
                    <input class="table_input" type="text" value=${data_arr[index].key3}>
                </td>
            </tr>
            `
                target_tbody.innerHTML += mod;
            }
        }

        function add_item_to_table2(data_arr, target_tbody) {
            for (let index = 0; index < data_arr.length; index++) {
                var mod = `
            <tr>
                <td>${data_arr[index].name}</td>
                <td>${data_arr[index].value1}</td>
                <td>${data_arr[index].value2}</td>
                <td>${data_arr[index].value3}</td>
                <td>${data_arr[index].value4}</td>
                <td>${data_arr[index].value5}</td>
                <td>${data_arr[index].value6}</td>
                <td>${data_arr[index].value7}</td>
                <td>${data_arr[index].value8}</td>
                <td>${data_arr[index].value9}</td>
                <td>${data_arr[index].value10}</td>              
            </tr>
            `
                target_tbody.innerHTML += mod;
            }
        }

        function display_table() {
            tbody.innerHTML = '';
            tbody1.innerHTML = '';
            add_item_to_table(data_arr_sheet3, tbody);
            add_item_to_table2(data_arr_sheet6, tbody1);
        }
        display_table()

        usr_search.addEventListener('input', function () {
            var str_search = usr_search.value.toLowerCase();
            if (str_search == '') {
                for (let i = 0; i < tbody.children.length; i++) {
                    tbody.children[i].children[1].style.backgroundColor = 'white';
                    tbody.children[i].style.display = 'table-row';
                }
            } else {
                for (let i = 0; i < tbody.children.length; i++) {
                    var new_id = 1;
                    var str_name = tbody.children[i].children[1].innerText.toLowerCase();
                    if (str_name.indexOf(str_search) == -1) {
                        tbody.children[i].style.display = 'none';
                        tbody.children[i].children[1].style.backgroundColor = 'white';
                    } else {
                        tbody.children[i].style.display = 'table-row';
                        tbody.children[i].children[1].style.backgroundColor = 'pink';
                    }
                }
            }
        })


        function search_reset() {
            usr_search.value = '';
            for (let i = 0; i < tbody.children.length; i++) {
                tbody.children[i].children[1].style.backgroundColor = 'white';
                tbody.children[i].style.display = 'table-row';
            }
        }



    </script>

    <script>
        var filter_switch = document.getElementById('filter_switch')
        var btn_abs = document.getElementById('btn_abs')
        var btn_dis = document.getElementById('btn_dis')
        var btn_met = document.getElementById('btn_met')
        var btn_exc = document.getElementById('btn_exc')
        var btn_tox = document.getElementById('btn_tox')
        var belong_abs = document.getElementsByClassName('belong_abs')
        var belong_dis = document.getElementsByClassName('belong_dis')
        var belong_met = document.getElementsByClassName('belong_met')
        var belong_exc = document.getElementsByClassName('belong_exc')
        var belong_tox = document.getElementsByClassName('belong_tox')

        var filter_hidden = document.getElementsByClassName('filter_hidden')[0]
        var tbody = document.getElementsByTagName('tbody')[0]

        filter_switch.addEventListener('click', function () {
            filter_switch.classList.toggle('switch_on')
            if (filter_switch.className.indexOf('switch_on') == -1) {
                filter_hidden.style.display = 'none';
                for (let i = 0; i < tbody.children.length; i++) {
                    tbody.children[i].style.display = 'table-row';
                }
            } else {
                // switch on:
                filter_hidden.style.display = 'block';
                for (let i = 0; i < tbody.children.length; i++) {
                    tbody.children[i].style.display = 'none';
                }
            }
        })

        btn_abs.addEventListener('click', function () {
            belong_display(btn_abs, belong_abs)
        })
        btn_dis.addEventListener('click', function () {
            belong_display(btn_dis, belong_dis)
        })
        btn_met.addEventListener('click', function () {
            belong_display(btn_met, belong_met)
        })
        btn_exc.addEventListener('click', function () {
            belong_display(btn_exc, belong_exc)
        })
        btn_tox.addEventListener('click', function () {
            belong_display(btn_tox, belong_tox)
        })

        function belong_display(btn_name, belong_name) {
            btn_name.classList.toggle('btn_on')
            if (btn_name.className.indexOf('btn_on') !== -1) {
                //display
                for (let i = 0; i < belong_name.length; i++) {
                    belong_name[i].style.display = "table-row";
                }
            } else {
                //none
                for (let i = 0; i < belong_name.length; i++) {
                    belong_name[i].style.display = "none";
                }
            }
        }

    </script>

    <!-- 滑动监测 -->
    <script>
        var task_detail = document.querySelector(".task_detail")
        document.addEventListener("scroll", function () {
            var sc = document.documentElement.scrollTop || document.body.scrollTop;
            if (sc >= 42) {
                // task_detail.style.borderBottomColor = '#e5e5e5';
                task_detail.style.boxShadow = '1px 2px 6px 0px';
            } else {
                task_detail.style.boxShadow = '0px 0px 0px 0px';
            }
        })
    </script>


    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/holder.min.js"></script>
    <script src="./js/ie10-viewport-bug-workaround.js"></script>
</body>

</html>